<template>
  <basic-container>
    <avue-crud
      :data="tableData"
      :table-loading="monitorLoading"
      :page.sync="page"
      :option="option"
      :search.sync="search"
      @on-load="getMonitorList"
      @refresh-change="getMonitorList"
      @search-change="searchChange"
    >
      <template slot-scope="{type,size,row}" slot="menu">
        <el-button @click="_refreshLog(row)" icon="el-icon-video-play" :size="size" :type="type">查看日志</el-button>
      </template>
    </avue-crud>
    <el-dialog append-to-body
               :show-close="false"
               :visible.sync="logDialog"
               width="auto">
      <m-log :key="logId" :item="item" :source="source" :logId="logId" @ok="ok" @close="close"></m-log>
    </el-dialog>
  </basic-container>
</template>

<script>
  import { mapActions } from 'vuex'
  import { stateType } from '@/view-module/dolphin-scheduler/pages/projects/pages/_source/conditions/instance/common'
  import mLog from './log';
  // import { getMonitorList } from '@/api/metadata/monitor';
  export default {
    components: { mLog },
    data() {
      return {
        monitorLoading:false,
        search:{},
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        searchParams: {
          // Search keywords
          searchVal: '',
          // Number of pages
          pageSize: 10,
          // Current page
          pageNo: 1,
          // host
          host: '',
          // State
          stateType: '',
          // Start Time
          startDate: '',
          // End Time
          endDate: '',
          // Exectuor Name
          executorName: ''
        },
        tableData:[],
        logDialog: false,
        item: {},
        source: '',
        logId: null,
        option: {
          addBtn:false,
          editBtn:false,
          delBtn:false,
          menuWidth:100,
          searchMenuSpan:5,
          column:[
            {
              label:'任务名称',
              prop:'name',
              search:true,
              searchSpan:5,
              display:false
            },
            {
              label:'实例ID',
              prop:'processInstanceName',
              display:false
            },
            {
              label:'状态',
              prop:'state',
              props: {
                label: "label",
                value: "code"
              },
              search:true,
              searchSpan:5,
              type:'select',
              width:70,
              dicData:stateType
            },
            {
              label:'调度时间',
              prop:'submitTime',
              search:true,
              searchRange:true,
              searchSpan:9,
              type: "date",
              format: "yyyy-MM-dd hh:mm:ss",
              valueFormat: "yyyy-MM-dd hh:mm:ss",
              display:false
            },
            {
              label:'开始时间',
              prop:'startTime',
              type: "date",
              format: "yyyy-MM-dd hh:mm:ss",
              valueFormat: "yyyy-MM-dd hh:mm:ss",
              display:false
            },
            {
              label:'结束时间',
              prop:'endTime',
              type: "date",
              format: "yyyy-MM-dd hh:mm:ss",
              valueFormat: "yyyy-MM-dd hh:mm:ss",
              display:false
            },
            {
              label:'运行时长',
              prop:'duration',
              width: 70,
              display:false
            },
            {
              label:'运行次数',
              prop:'retryTimes',
              width: 70,
              display:false
            },
            {
              label: "执行用户",
              prop: "executorName",
              display:false
            },
            {
              label: "host",
              prop: "host",
              display:false
            }
          ]
        }
      }
    },
    mounted() {
     // this.getMonitorList();
      if(this.taskName) {
        this.option.column[0].search = false;
      }
    },
    props: {
      type: {
        type: Number,
        default: 3
      },
      taskName: {
        type: String,
        default: ''
      }
    },
    watch:{
      'taskName'(){
        this._getProcessInstanceListP();
      }
    },
    methods: {
      ...mapActions('dag', ['getProcessInstance','getTaskInstanceList']),
      viewDetail() {

      },
      _getProcessInstanceListP () {
        this.monitorLoading = true;
        if(this.taskName) {
          this.searchParams.searchVal = this.taskName;
        }
        this.getTaskInstanceList({
          ...this.searchParams,
          type: this.type
        }).then(res => {
          if (this.searchParams.pageNo > 1 && res.totalList.length === 0) {
            this.searchParams.pageNo = this.searchParams.pageNo - 1
          } else {
            this.tableData = [];
            this.tableData = res.totalList;
            this.page.total = res['total'];
          }
          this.monitorLoading = false;
        }).catch(e => {

        })
      },
      _refreshLog (item) {
        this.item = item
        this.source = 'list'
        this.logId = item.id
        this.logDialog = true
      },
      ok () {},
      close () {
        this.logDialog = false
      },
      searchChange(params,done) {
        this.searchParams.searchVal = params['name'] || '';
        this.searchParams.stateType = params['state'] || '';
        if(params['submitTime']){
          this.searchParams.startDate = params['submitTime'][0];
          this.searchParams.endDate = params['submitTime'][1];
        }

        done();
        this.getMonitorList();
      },
      getMonitorList(page) {
        if(page){
          this.searchParams.pageNo = page.currentPage;
        } else {
          this.searchParams.pageNo = 1;
        }
        this._getProcessInstanceListP()
      }
    }
  }
</script>

<style lang="scss">

</style>
